<template>
	<view>
		<Header title="充值"></Header>
		<view class="toubu">
			<view class="content_content_con">
				<view class="chongzhi">充值类别</view>
				<view class="chongzhi_kz">
					<view v-for="(item,index) in leibie" :key="index" @click="changeColor(index)">
						<view class="yue_kz" :class="{tab_ACT:index == leibie_money}">{{item.money}}</view>
					</view>
				</view>
				<view class="chongzhi">充值金额</view>
				<view class="chongzhi_je">
					<view v-for="(item,index) in yuan" @click="changeMoney(index)">
						<view class="jine" :class="{tab_ACT:index == yuan_xiabiao}" v-if="index!==5">{{item.money}}元</view>
						<view class="jine" :class="{tab_ACT:index == yuan_xiabiao}" v-else>其他</view>
					</view>
				</view>
				<view v-if="yuan_xiabiao==5">
					<view class="chongzhi zidingyi">自定义金额</view>
					<input class="jin_e" v-model="content" type="text" placeholder="请输入要充值的金额，如：3900等"
						placeholder-class="index_placeholder" @input="oninput">
				</view>
				
				<view class="chongzhi">充值方式</view>
				<view class="chongzhi_wx">微信充值</view>
				<view class="chongzhi_sm">
					<view>充值说明：</view>
					<view>1.充值金额只能在本小程序中使用</view>
					<view class="tixian">2.充值金额无法提现，无法找零</view>
					<view>3.充值金额永久有效</view>
				</view>
			</view>

			<view class="anniu chong" @click="chongzhi">充值</view>

		</view>
		<requestLoading></requestLoading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tishi: 1 ,//展示加载动画
				content: "0.01",
				leibie: [{
						money: "客资余额"
					},
					{
						money: "成交余额"
					}
				],
				leibie_money: 0,
				yuan: [{
						money: "3999"
					},
					{
						money: "9999"
					},
					{
						money: "19999"
					},
					{
						money: "2999"
					},
					{
						money: "999999"
					},
					{
						money: ""
					},
				],
				yuan_xiabiao:0,
			}
		},
		onShow(){},
		methods: {
			changeColor(index) {
				this.leibie_money = index;
			},
			changeMoney(index) {
				console.log("11")
				this.content='';
				this.yuan_xiabiao= index;
			},
			chongzhi() {
				var that = this;
				if(that.yuan_xiabiao!==5){
					that.content=that.yuan[that.yuan_xiabiao].money
				}
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						that.configure.ajax({
							url: 'wxPay/miniAppPay',
							tishi: that.tishi,
							zhuang: 1,
							data: {
								typeid:that.leibie_money,
								code:loginRes.code,
								money:that.content
							},
							method: 'POST',
							success: function(res) {
								console.log('res_res')
								console.log(res)
								// paypost=json res.data
								// appId: "wxf0bb3c986a8033a9"
								// nonceStr: "1663865501849"
								// package: "prepay_id=wx230051417294758bd3ee97764bf27d0000"
								// paySign: "FE05EB70DDC13D8D9FEA73B33F3A46FC68F7DCEF0EEF9B3C79B30DD558CAFC7F"
								// signType: "HMAC-SHA256"
								// timeStamp: "1663865501"
								
								// timeStamp: res.data.timeStamp,
								// nonceStr: res.data.nonceStr,
								// package: res.data.package,
								// signType: res.data.signType,
								// paySign: res.data.paySign,
								uni.requestPayment({
									provider: 'wxpay',
									...res.data,
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
										// setTimeout(() => {
										// 	uni.navigateBack();
										// }, 500);
										uni.navigateBack();
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}
						})
					}
				});
				
			},
			oninput(e){
				console.log("eeeeeeeeeeeee",e)
				 // e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
			}
		}

	}
</script>

<style lang="scss" scoped>
	.chong{
		margin-bottom: 50rpx;
	}
	.chongzhi {
		font-size: 30rpx;
		color: $heise_ziti;
		border-left: 4rpx solid #FF609A;
		padding-left: 16rpx;
		margin: 54rpx 0 30rpx 0;
	}

	.chongzhi_kz {
		display: flex;
	}

	.yue_kz {
		color: $qianhuione_ziti;
		background-color: $white_ziti;
		font-size: 26rpx;
		padding: 27rpx 43rpx 27rpx 43rpx;
		border-radius: 12rpx;
		margin-right: 45rpx;
		border: solid 2rpx $qianhui_eee;
	}

	.tab_ACT {
		color: $zhuce_color;
		background-color: $yifu_bc;
		border: solid 2rpx $zhuce_color !important;
	}

	.chongzhi_je {
		display: flex;
		flex-wrap: wrap;
	}

	.jine {
		width: 180rpx;
		height: 90rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 90rpx;
		border: solid 2rpx $qianhui_eee;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		margin-right: 26rpx;
	}

	.zidingyi {
		margin-top: 0;
	}

	.jin_e {
		border: solid 2rpx $qianhui_eee;
		padding: 27rpx 0 27rpx 30rpx;
		border-radius: 12rpx;
	}

	.chongzhi_wx {
		padding: 27rpx 20rpx 27rpx 40rpx;
		font-size: 26rpx;
		color: $zhuce_color;
		background-color: $yifu_bc;
		width: calc(100% - 500rpx);
		border-radius: 12rpx;
		border: solid 2rpx $zhuce_color;
		margin-bottom: 60rpx;
	}

	.chongzhi_sm {
		font-size: 26rpx;
		color: $qianhui_ziti;
	}

	.chongzhi_sm view:first-child {
		margin-bottom: 24rpx;
	}

	.tixian {
		margin: 18rpx 0;
	}
</style>
